<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>课程展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../static/assets/libs/layui/css/layui.css" th:href="@{/assets/libs/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" href="../static/assets/css/style.css" th:href="@{/assets/css/style.css}" />
    <link rel="stylesheet" href="../static/assets/css/global.css" th:href="@{/assets/css/global.css}" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- 顶部 -->
<div th:include="common :: headname"></div>
<div class="layui-banner">
    <div class="layui-carousel" id="test10" style=" margin: auto; text-align: center;" >
        <div carousel-item>
            <div><a href="javascript:;"><img src="../static/image/yingyu.jpg" th:src="@{/image/guanghe.jpg}" style="height: 460px" ></a></div>
            <div><a href="javascript:;"><img src="../static/image/shulihua.jpg" th:src="@{/image/qinyuanchun.jpg}" style="height: 460px"></a></div>
            <div><a href="javascript:;"><img src="../static/image/shuxue.jpg" th:src="@{/image/sanjiao.jpg}" style="height: 460px"></a></div>
        </div>
    </div>
</div>
<!--精品课程-->
<div class="layui-container" style="width: 1240px;">
    <div class="layui-row">
        <div class="layui-col-sm12" style="margin-top: 40px;">
            <h3 class="course_title" style=" line-height: 36px;text-align: center;font-size: 20px;font-weight: 600;color: #4D555D;">
                <img src="../static/assets/images/item.png" th:src="@{/assets/images/item.png}"> 所<span></span>有<span></span>课<span></span>程</h3>
            <div class="layui-col-md3 datagrid-item" th:each="course:${courses}">
                <a th:href="@{/course/detail(id=${course.id})}">
                    <div class="project-list-item">
                        <img class="project-list-item-cover" src="../static/image/shuxue.jpg" th:src="${course.picture}">
                        <div class="project-list-item-body">
                            <h2 th:text="${course.title}">三角函数</h2>
                            <div class="project-list-item-desc">
                                作者：<span>[[${course.username}]]</span>
                                <div class="head-list">

                                    <span class="time"><i class="layui-icon layui-icon-log"></i>[[${#dates.format(course.createTime,'yyyy/MM/dd')}]]</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
        </div>
    </div>
</div>

<!-- js部分 -->
<div class="fly-footer">
    <p><a href="http://fly.layui.com/" target="_blank">Fly社区</a> 2021 &copy; <a href="http://www.layui.com/" target="_blank">layui.com 出品</a></p>
    <p>
        <a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
        <a href="http://www.layui.com/template/fly/" target="_blank">获取Fly社区模版</a>
        <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
    </p>
</div>
<script type="text/javascript" src="../static/assets/libs/layui/layui.js" th:src="@{/assets/libs/layui/layui.js}"></script>
<script type="text/javascript" src="../static/assets/js/common.js" th:src="@{/assets/js/common.js}"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test10'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            ,height: '480px'
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
<script text="text/javascript">
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>
</body>
</html>


